<template>
	<view class="storeHome">
		<view class="top">
			<uni-swiper-dot v-if="adv.length > 0" :info="adv" :dotsStyles="dotsStyles" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change"  interval="3000" duration="500" circular="true" autoplay="true">
					<swiper-item v-for="(item ,index) in adv" :key="index">
						<view class="swiper-item">
							<image :src="item.cover" mode="widthFix" @click="jump('product_view', 'id='+item.jump_link+'&merchantId='+merchantId)"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<div class="search">
				<uniSearchBar placeholder="商品名称搜索" placeholder-style="color: #CCCCCC;" radius="36" cancelButton="none" v-model="keywords"></uniSearchBar>
				<label @click="searchFun()">搜索</label>
			</div>
			<!-- <view class="search">
				<view class="search_con">
					<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/search.png" mode="aspectFit"></image>
					<input type="text" v-model="keywords" placeholder-style="color:#CCCCCC" placeholder="商品名称搜索" />
				</view>
				<view class="search_txt" @click="searchFun()">搜索</view>
			</view> -->
		</view>
		<view class="nav">
			<view class="nav_item" @click="getnav(index)" v-for="(item,index) in nav" :key="index">
				<view v-if="navindex==index" class="sel"></view>
				<view :class="index==navindex?'hover nav_name':'nav_name' ">
					<text>{{ item.name }}</text>
					<view class="pic" v-if="index!=3&&item.val>0">
						<image :src="item.val==2?'https://hdsq.aoorange.cn/attachment/xcx/icon/storeHome_icon.png':'https://hdsq.aoorange.cn/attachment/xcx/icon/storeHome_icon1.png'"
						 mode="widthFix"></image>
					</view>
					<view :class="istype?'up':'down'" v-if="index==3">
					</view>
				</view>
			</view>
			<view class="model" v-if="istype">
				<view class="num">
					<view :class="selCateId.indexOf(item.itemId) >= 0?'item':'noitem'" v-for="(item,index) in cateList" :key="index" @click="selCateFun(item.id)">
						<text>{{item.title}}</text>
					</view>
				</view>
				<view class="bot">
					<text @click="close()">取消</text>
					<text @click="subCateFun()">确定</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="list">
				<view class="list_item" v-for="(item,index) in pageResult.list" :key="index" @click="jump('product_view', 'id='+item.id+'&merchantId='+merchantId)">
					<image :src="item.picture" mode="aspectFill"></image>
					<view class="item_text">{{item.name}}</view>
					<view class="item_text1">
						<view>￥{{item.price}}</view>
						<!-- <view>￥{{item.minSkuPrice}}{{item.maxSkuPrice > 0 ? '-'+item.maxSkuPrice : ''}}</view> -->
						<!-- <view v-if='item.minMarketPrice > 0'>￥{{item.minMarketPrice}}{{item.maxMarketPrice > 0 ? '-'+item.maxMarketPrice : ''}}</view> -->
					</view>
				</view>
			</view>
		</view>
		<movable-view class="xf" direction="all" @click="jump('cart')">
			<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/car.png" mode="widthFix"></image>
			<text>{{cartNum}}</text>
		</movable-view>
	</view>
</template>

<script>
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
	export default {
		components: {
			uniSearchBar
		},
		data() {
			return {
				nav: [
					{'name' : "销量", 'val' : 0},
					{'name' : "最新", 'val' : 0},
					{'name' : "价格", 'val' : 0},
					{'name' : "分类", 'val' : 0},
				],
				navindex: -1,
				istype: false,
				adv: [],
				current: 0,
				mode: 'round',
				dotsStyles: {
					backgroundColor: 'rgba(255,255,255,0.3)',
					selectedBackgroundColor: '#FFC600',
					selectedBorder: '1px rgba(255,198,0,1) solid',
					border: '1px rgba(255,255,255,0.3) solid',
					selectedBorder: '1px rgba(255,198,0,1) solid'
				}, //轮播图样式配置
				merchantId : 0,
				info: {},
				cartNum: 0,
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					merchantId: 0,
					saleSort: 0,
					newSort: 0,
					priceSort: 0,
					payType: 0,
					type: 1,
					keywords: '',
					cateId: 0,
					page: 0,
					pageSize: 10,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				},
				keywords: '',
				cateList: [],
				selCateId: ["0"],
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			getnav(index) {
				this.navindex = index;
				let item = this.nav[index];
				let val = item.val == 0 ? 1 : (item.val == 1 ? 2 : 1);
				this.$set(this.nav[index], 'val', val);
				if(index == 0) {
					this.pageParam.saleSort = val;
				}
				if(index == 1) {
					this.pageParam.newSort = val;
				}
				if(index == 2) {
					this.pageParam.priceSort = val;
				}
				if (index == 3) {
					this.close();
					return ;
				}
				this.pageParam.page = 0;
				this.pageResult.list = [];
				this.getList();
			},
			close(){
				this.istype = !this.istype
			},
			getCartNum() {
				if(uni.getStorageSync('access-token') == '') {
					return ;
				}
				serve
					.request({
						url: '/shop/index/cart-num',
						data: {
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							merchantId: this.merchantId,
							type: 1
						}
					})
					.then(res => {
						this.cartNum = res.data.num;
					});
			},
			getInfo() {
				var self = this;
				serve
					.request({
						url: '/marketing/merchant/view',
						data: {
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							'local-city':uni.getStorageSync('localCity'),
							id: self.merchantId,
						}
					})
					.then(res => {
						console.log(res);
						if(res.code != 200) {
							uni.showToast({
								title: res.message,
								icon : 'none',
								success:function(){ 
									setTimeout(function () { 
										common.jump('store_list')
									}, 2000) 
								} 
							});
							return;
						}
						self.info = res.data;
						wx.setNavigationBarTitle({
							title: res.data.title,
						});
					});
			},
			getCateList() {
				serve
					.request({
						url: '/shop/index/category-list',
						data: {
							appkey: uni.getStorageSync('appkey'),
							merchantId: this.merchantId,
							type: 1
						}
					})
					.then(res => {
						this.cateList = res.data;
					});
			},
			getAdvList() {
				serve
					.request({
						url: '/marketing/merchant/adv-list',
						data: {
							appkey: uni.getStorageSync('appkey'),
							merchantId: this.merchantId,
						}
					})
					.then(res => {
						this.adv = res.data;
					});
			},
			selCateFun(index) {
				let key = this.selCateId.indexOf(index);
				if(key >= 0) {
					this.selCateId.splice(key, 1);
				} else {
					this.selCateId.push(index);
				}
			},
			subCateFun() {
				if(this.selCateId.length == 0) {
					uni.showToast({
						title: '请选择分类',
						icon:'none'
					});
					return ;
				}
				this.close();
				this.pageParam.cateId = this.selCateId;
				this.pageParam.page = 0;
				this.pageResult.list = [];
				this.getList();
			},
			getList() {
				var self = this;
				self.pageParam.page++
				serve
					.request({
						url: '/shop/index/product-list',
						data: self.pageParam
					})
					.then(res => {
						console.log(res.data);
						if (res.data && res.data.length > 0) {
							self.pageResult.list = self.pageResult.list.concat(res.data);
						}
						self.pageResult.isEmpty = self.pageResult.list.length == 0;
						self.pageResult.isEnd = res.data.length == 0;
					});
			},
			searchFun() {
				// if(this.keywords == '') {
				// 	uni.showModal({
				// 		title: '温馨提示',
				// 		content: '请填写关键词',
				// 		showCancel:false
				// 	});
				// 	return ;
				// }
				this.pageParam.keywords = this.keywords.value;
				this.pageParam.page = 0;
				this.pageResult.list = [];
				this.getList();
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			this.merchantId = options.merchantId || 0;
			if(this.merchantId == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon : 'none',
					success:function(){ 
						setTimeout(function () { 
							common.jump('return_one')
						}, 2000) 
					} 
				});
				return;
			}
			this.pageParam.merchantId = this.merchantId;
			this.getInfo();
			this.getCartNum();
			this.getCateList();
			// this.getAdvList();
			this.getList();
		},
		onPullDownRefresh() {
			this.pageParam.page = 0;
			this.pageResult.list = [];
			this.getList();
			this.getCartNum();
		},
		onReachBottom() {
			if (this.pageResult.isEnd || this.pageResult.isEmpty) {
				return
			}
			this.getList();
		}
	}
</script>

<style scoped lang="scss">
	.storeHome {
		.top {
			background: #FBFBFB;

			.top_bg {
				width: 100%;
				height: 260upx;
			}

			.name {
				width: 100%;
				position: relative;
				margin-top: -92upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28upx;
				color: #333333;
				position: absolute;

				image {
					width: 160upx;
					height: 160upx;
				}

				text {
					margin-top: 23upx;
				}

				.like {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					right: 137upx;
					top: 50upx;
					width: 70upx;
					height: 70upx;
					background: rgba(255, 255, 255, 1);
					border-radius: 50%;

					image {
						width: 39upx;
						height: 34upx;
					}
				}
			}

			.search {
				padding: 20upx 30upx;
				display: flex;
				align-items: center;
				color: #3333ff;
				background: #FFFFFF;
				border-top: 16upx #FBFBFD solid;
				border-bottom: 16upx #FBFBFD solid;
				.uni-searchbar {
					flex: 1;
				}
						
				label {
					font-size: 32upx;
					margin-left: 47upx;
				}
			}

			.top_con {
				box-sizing: border-box;
				padding: 0upx 30upx 40upx;
				color: #999999;
				font-size: 20upx;

				.coupon {
					padding: 14upx 0upx 18upx;

					.red {
						color: #EB5938;
						border: 1upx #EB5938 solid;
						padding: 0upx 4upx;
					}

					.left {
						margin-left: 10upx;
					}
				}

			}
		}

		.swiper-box {
			width: 100%;
			height: 750upx;
			// margin-top: 100upx;
		
			image {
				width: 100%;
				height: 420upx;
			}
		}

		.nav {
			display: flex;
			width: 100%;
			// top: 88upx;
			height: 100upx;
			background: #FFFFFF;
			position: relative;
			align-items: center;
			border-bottom: 1upx rgba(204, 204, 204, 0.3) solid;

			.model {
				position: absolute;
				width: 100%;
				top: 100upx;
			    z-index: 200;
				.num {
					background: #FFFFFF;
					box-sizing: border-box;
					padding: 50upx 30upx;
					display: flex;
					flex-wrap: wrap;
			
					.item {
						padding: 10upx 50upx;
						border-radius: 40upx;
						font-size: 28upx;
						margin-top: 20upx;
						margin-right: 10upx;
						color: #FFFFFF;
						background: rgba(251, 202, 63, 1);
					}
			
					.noitem {
						padding: 10upx 50upx;
						margin-right: 10upx;
						margin-top: 20upx;
						font-size: 28upx;
						border: 1upx rgba(204, 204, 204, 0.3) solid;
						border-radius: 40upx;
					}
			
				}
			
				.bot {
					display: flex;
					width: 100%;
			
					text {
						font-size: 28upx;
						width: 50%;
						height: 80upx;
						line-height: 80upx;
						text-align: center;
						background: #eeeeee;
					}
			
					text:last-child {
						color: #FFFFFF;
						background: rgba(251, 202, 63, 1);
					}
				}
			}
			
			.nav_item {
				width: 25%;
				height: 100upx;
				text-align: center;
				position: relative;

				.hover {
					color: #222222 !important;
					font-weight: bold;
				}

				.sel {
					width: 30upx;
					height: 7upx;
					background: rgba(255, 187, 0, 1);
					border-radius: 3upx;
					position: absolute;
					bottom: 0upx;
					left: 44%;

				}

				.nav_name {
					line-height: 100upx;
					padding: 0upx 10upx;
					display: inline-flex;
					height: 28upx;
					font-size: 32upx;
					position: relative;
					color: #999999;

					.pic {
						position: absolute;
						top: 0upx;
						right: -20upx;

						image {
							width: 20upx;
						}
					}

					.down {
						position: absolute;
						top: 45upx;
						right: -20upx;
						width: 0px;
						height: 0px;
						border-width: 10upx;
						border-style: solid;
						border-color: #999999 transparent transparent transparent;
					}

					.up {
						position: absolute;
						top: 35upx;
						right: -20upx;
						width: 0px;
						height: 0px;
						border-width: 10upx;
						border-style: solid;
						border-color: transparent transparent #999999 transparent;
					}
				}
			}
		}

		.xf {
			position: fixed;
			left: 630upx;
			top: 70%;
			width: 90upx;
			height: 90upx;

			image {
				width: 100%;
				height: 100%;
			}

			text {
				position: absolute;
				width: 30upx;
				height: 30upx;
				right: 5upx;
				line-height: 30upx;
				text-align: center;
				border-radius: 50%;
				font-size: 18upx;
				background: red;
				color: #FFFFFF;
			}
		}

		.content {
			box-sizing: border-box;
			width: 100%;
			padding: 0upx 30upx 49upx;
			border-bottom: 16upx #FBFBFD solid;

			.list {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 0upx 0upx 0upx;

				.list_item {
					width: 330upx;
					padding-top: 30upx;

					image {
						width: 330upx;
						height: 340upx;
					}

					.item_text {
						margin-top: 30upx;
						font-size: 32upx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.item_text1 {
						view:nth-child(1) {
							color: #FFC600;
							font-size: 32upx;
						}

						view:nth-child(2) {
							color: #CBCBCB;
							font-size: 24upx;
							text-decoration: line-through;
							margin-left: 8upx;
						}
					}
				}
			}
		}
	}
</style>
